<template>
    <view class="main">
        <van-tabs ref="scrollInto" line-height="0" :border="false" v-model:active="active" animated @change="onChangeTabs"   :scrollspy="false" swipeable>
            <van-tab  v-for="(item,index) in vanTabList"  :name="item.channel " :title="item.title " :key="index"   >
              <div class="card_box" :id="'card_box'+index">
              <view class="card-1" > {{ item.content }}</view>
              <view class="card-2" >
                 <div class="card-2-scroll" @touchstart.stop @touchend.stop>
                   <view class="card-2-item" :style="{'backgroundColor':itemColor[index%6]}" @click="onClickCardItem(item)" v-for="(item,index) in tabList" :key="index"> {{ item }}</view>
                 </div>
              </view>
              <TalkComponent></TalkComponent>
             </div>
            </van-tab>
        </van-tabs>
    </view>
  
  </template>
  
  <script lang="ts" setup name="tab">
  import {  reactive } from "vue";
  import  {useContent,tabList,active,vanTabList,onClickCardItem,scrollInto} from "../hooks"
  import TalkComponent from "../components/talk.vue"
  const { onChangeTabs } = useContent()
  const itemColor = reactive([
    '#E9F6FE',
    '#E9F7EF',
    '#FCEBF1',
    '#E9F6FE',
    '#E9F7EF',
    '#FEF1E6',
    '#FCEBF1'
  ])

 

 
  
  </script>
  <style scoped lang="less">
  .main{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: 1;
    overflow: hidden;
  }
  .card_box{
    display: flex;
    flex-direction: column;
    padding: 0 16px;
  }
  .card-1{
    margin: 14px 0px;
    padding: 10px;
    border-radius: 16px;
    background-color: #fff;
    border-bottom-left-radius: 0px;
    text-align: left;
  }
  .card-2{
    min-height: 90px;
    max-height: 90px;
    overflow: scroll;
  
    > .card-2-scroll{
      width: 500px;
      display: flex;
      flex-wrap: wrap;
    }
    .card-2-item{
      margin: 4px;
      border-radius: 12px;
      display: inline-block;
      padding: 2px 10px;
    }
  }
  /* 隐藏滚动条 */
  ::-webkit-scrollbar {
    display: none;
   }
   .van-tabs{
   }
   :deep(.van-tabs__content){
   }
  :deep(.van-tab__panel){
    height: calc(100vh - 160px);
    overflow-y: scroll;
    box-sizing: border-box;
   }
    // 选中样式
    :deep(.van-tab.van-tab--active){
    font-size: 16px;
   }
  </style>
  
  